<!-- param: viewMode-控制显示，id-控制数据加载，mode-控制button加载 -->
<template>
  <el-container>
    <ik-table-page
      v-if="viewMode==='list'"
      :web-path="webPath"
      :bg-path="bgPath"
      :search-items="searchItems"
      :columns="columns"
    />
    <info-form
      v-if="viewMode==='info'"
      ref="infoPage"
    />
  </el-container>
</template>
<script>
import InfoForm from "@/components/commonPage/pages/ikFormPage/infoForm/index.vue"

export default {
  components: {
    InfoForm
  },
  props: {
    searchItems: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    },
    formItems: {
      type: Array,
      default: () => []
    },
    bgPath: {
      type: String,
      required: true
    },
    webPath: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // ===== ===== ===== ===== 全局属性 ===== ===== ===== =====
      // 界面模式  info - 信息页, list - 列表页
      viewMode: '',
      // 编辑模式  add - 新增模式, edit - 编辑模式, details - 详情模式, list - 列表模式
      mode: '',
      // 表单
      formData: {
        head: {},
        body: {}
      }
    }
  },
  provide() {
    return {
      pageData: this
    }
  },
  created() {
    // 获取视图模式
    this.viewMode = this.$route.params.viewMode || "list"
    this.mode = this.$route.params.mode || "list"
  },
  methods: {
    /**
     * 修改表单中的数据
     * @param key
     * @param value
     */
    updateFormData(key, value) {
      this.$refs.infoPage.updateFormData(key, value)
    }
  }
}
</script>
<style lang="scss">
@import "~@/styles/listinfo";

.data-directory-tabs-info {
  height: calc(100% - 60px);
}

.data-directory-tabs-info .el-tabs__content {
  height: calc(100% - 53px);
  overflow: auto;
  min-height: 350px;
}
</style>
